<template>
    <view class="auth-container">
        <view class="auth-card">
            <text class="auth-title">注册</text>
            
            <view class="input-group">
                <input 
                    type="text" 
                    class="input-field" 
                    placeholder="请输入用户名"
                    v-model="registerForm.username"
                />
                
                <input 
                    type="password" 
                    class="input-field" 
                    placeholder="请输入密码"
                    v-model="registerForm.password"
                />
                
                <input 
                    type="password" 
                    class="input-field" 
                    placeholder="请确认密码"
                    v-model="registerForm.confirmPassword"
                />
                <text v-if="registerError" class="error-message">{{ registerError }}</text>
            </view>
            
            <button class="auth-btn" @click="handleRegister">注册</button>
            
            <view class="switch-tip">
                <text>已有账号？</text>
                <text class="switch-link" @click="goToLogin">去登录</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            registerForm: {
                username: '',
                password: '',
                confirmPassword: ''
            },
            registerError: ''
        }
    },
    methods: {
        handleRegister() {
            this.registerError = '';
            
            if (!this.registerForm.username || !this.registerForm.password || !this.registerForm.confirmPassword) {
                this.registerError = '请填写完整信息';
                return;
            }
            
            if (this.registerForm.password !== this.registerForm.confirmPassword) {
                this.registerError = '两次输入的密码不一致';
                return;
            }
            
            if (this.registerForm.password.length < 6) {
                this.registerError = '密码长度至少6位';
                return;
            }
            
            console.log('注册信息:', this.registerForm);
            
            uni.showToast({
                title: '注册成功！',
                icon: 'success'
            });
            
            // 注册成功后跳转到登录页面
            setTimeout(() => {
                uni.navigateBack();
            }, 1500);
        },
        goToLogin() {
            uni.navigateBack();
        }
    }
}
</script>

<style scoped>
.auth-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    padding: 20px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.auth-title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
    font-weight: 600;
    display: block;
}

.input-group {
    margin-bottom: 20px;
}

.input-field {
    width: 100%;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 15px;
}

.input-field:focus {
    outline: none;
    border-color: #007AFF;
}

.auth-btn {
    width: 100%;
    background-color: #007AFF;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
}

.switch-tip {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}

.switch-link {
    color: #007AFF;
    margin-left: 5px;
}

.error-message {
    color: #ff3b30;
    font-size: 14px;
    margin-top: 5px;
    text-align: left;
}
</style>